<template>
  <div class="energySources-systemManage">
    <customDetailsTopbar title="能源管理体系查询" flag @back="back" />
    <van-grid :column-num="2" :gutter="10" :border="false">
      <van-grid-item v-for="item,index in list" :key="index" icon="photo-o" :text="item.text" @click="goList(item)" />
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text: '能源管理体系',
          icon: ''
        },
        {
          text: '清洁生产管理',
          icon: ''
        },
        {
          text: '绿色工厂',
          icon: ''
        }
        // {
        //   text: '零碳工厂',
        //   icon: ''
        // }
      ]
    }
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { ...this.$route.query }
      })
    },
    goList(item) {
      this.$router.push({
        path: '/staging/systemManageList',
        query: {
          name: item.text
        }
      })
    }
  }
}
</script>

<style lang="scss">
.van-grid-item__content.van-grid-item__content--center{
  border-radius: 5px;
  .van-grid-item__text{
    color: white;
    font-size: 14px;
  }
  .van-grid-item__icon{
    color: white;
  }
}
.energySources-systemManage .van-grid-item:nth-child(1) .van-grid-item__content.van-grid-item__content--center{
  background-color: #D3A3FF;
}
.energySources-systemManage .van-grid-item:nth-child(2) .van-grid-item__content.van-grid-item__content--center{
  background-color: #F8B65F;
}
.energySources-systemManage .van-grid-item:nth-child(3) .van-grid-item__content.van-grid-item__content--center{
  background-color: #46E9B7;
}
.energySources-systemManage .van-grid-item:nth-child(4) .van-grid-item__content.van-grid-item__content--center{
  background-color: #46B3FB;
}
</style>
